<template>
	<tn-popup mode="bottom" v-model="show" @close="close">
		<view class="tn-classify__container box">
			<view class="tn-classify__container__wrap tn-flex tn-flex-nowrap tn-flex-row-around tn-bg-white">
				<!-- 左边容器 -->
				<scroll-view class="tn-classify__left-box left-width" scroll-y scroll-with-animation>
					<view v-for="(item, index) in leftList" :key="index" :id="`tabbar_item_${index}`"
						class="tn-classify__tabbar__item tn-flex tn-flex-col-center tn-flex-row-center"
						@tap.stop="onLeft(item,index)" :class="[currentTabbarIndex==index?'leftActive':'']">
						<view class="tn-classify__tabbar__item__title">{{ item.name }}</view>
					</view>
				</scroll-view>

				<!-- 右边容器 -->
				<scroll-view class="tn-classify__right-box" scroll-y>
					<block>
						<view class="tn-classify__content">
							<!-- 分类内容子栏目 -->
							<view class="tn-classify__content__sub-classify">
								<view class="tn-classify__content__sub-classify--title tn-text-lg">

									<scroll-view scroll-x>
										<view class="tn-text-md tn-flex">
				
											<view v-for="(item,index) in tabsList" class="tn-padding-sm" :key="index"
												:class="[tabsIndex==index?'tabsactive':'']"
												@tap.stop="onTabs(item,index)">
												{{item.cname}}
											</view>
										</view>
									</scroll-view>
								</view>
								<view class="tn-classify__content__sub-classify__content ">
									<view v-for="(sub_item,sub_index) in rightList" :key="sub_index"
										@click="onRight(sub_item,sub_index)"
										class="tn-classify__content__sub-classify__content__item">
										<view
											class="tn-classify__content__sub-classify__content__title tn-margin-top-xs tn-margin-bottom-sm tn-text-md">
											{{ sub_item.cname }}
										</view>
									</view>
								</view>
							</view>
						</view>

					</block>
				</scroll-view>
			</view>
		</view>
	</tn-popup>
</template>

<script>
	import {
		GetdgtxPlaces
	} from '@/api/address/index.js'
	export default {
		name: 'templateShopClassify',
		data() {
			return {
				show: false,
				// 侧边栏分类数据
				tabsList: [

				],
				leftList: [{
						name: '国家级',
						type: 0
					},
					{
						name: '省级',
						type: 1
					},
					{
						name: '市级',
						type: 2
					},
					{
						name: '区县级',
						type: 3
					},
				],
				rightList: [

				],
				// 当前选中的tabbar序号
				currentTabbarIndex: 0,
				tabsIndex: 0,
				//已选的数据
				gather: [],
			}
		},
		mounted() {},
		methods: {
			onLeft(item, index) {
				this.currentTabbarIndex = index
				this.gather = []
				this.Heavy()
				let obj;
				switch (item.type) {
					case 0:
						obj = {
							ctype: 0
						}
						this.getdgtxPlaces(obj)
						break;
					case 1:
						obj = {
							ctype: 1
						}
						this.getdgtxPlaces(obj)
						break;
					case 2:
						obj = {
							ctype: this.leftList[1].type
						}
						this.getdgtxPlaces(obj)
						break;
					case 3:
						obj = {
							ctype: this.leftList[1].type
						}
						this.getdgtxPlaces(obj)
						break;
				}
			},
			openPrpup(data) {
				// let list = data.filter(item => item !== '');
				// if (list) {
				// 	list.map((item) => {

				// 	})
				// }
				this.Heavy()
				let obj = {
					ctype: 0
				}
				this.getdgtxPlaces(obj)
				this.currentTabbarIndex = 0
				this.gather = []
				this.tabsIndex = 0
				this.show = true
			},
			onRight(item, index) {
				this.gather.push(item)
				let leftIndex = this.currentTabbarIndex
				switch (leftIndex) {
					case 0:
						this.tabsList = [item]
						this.$emit('updataAddress', this.tabsList,'0')
						this.close()
						break;
					case 1:
						this.tabsList = [item]
						this.$emit('updataAddress', this.tabsList,'1')
						this.close()
						break;
					case 2:
					   this.onAddredInt(item)
						break;
					case 3:
				 this.onAddredNum(item)
						break;

				}
			},
			//第1次点击
			onAddredInt(item){
			let	length = this.gather.length
				switch (length) {
					case 1:
						this.tabsList = [item, {
							cname: '请选择'
						}]
						let data = {
							parentId: this.tabsList[0].id
						}
						this.getdgtxPlaces(data)
						this.tabsIndex = 1
						break;
					case 2:
						this.$set(this.tabsList, 1, item)
						this.$emit('updataAddress', this.tabsList,'2')
						this.close()
						break;
				}
			},
			//第2
			onAddredNum(item){
			let	length = this.gather.length
				let obj;
				switch (length) {
					case 1:
						this.tabsList = [item, {
							cname: '请选择',
							id: ""
						}]
						obj = {
							parentId: this.tabsList[0].id
						}
						this.getdgtxPlaces(obj)
						this.tabsIndex = 1
						break;
					case 2:
						this.tabsList[1] = item
						this.tabsList[2] = {
							cname: '请选择',
							id: ""
						}
						this.tabsIndex = 2
						obj = {
							parentId: this.tabsList[1].id
						}
						this.getdgtxPlaces(obj)
						break;
					case 3:
						this.tabsList[2] = item
						this.tabsIndex = 3
						this.$emit('updataAddress', this.tabsList,'3')
						this.close()
						break;
				}
				
			},
			onTabs(item, index) {
				this.tabsIndex = index
			},
			Heavy() {
				this.tabsList = [{
					cname: '请选择',
					id: ""
				}]
			},
			close() {
				this.show = false
			},
			getdgtxPlaces(data) {
				GetdgtxPlaces(data).then((res) => {
					this.rightList = res.data
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.leftActive {
		background-color: #e8e8e8;
	}

	.tabsactive {
		border-bottom: 2rpx solid #3668FC;
	}

	.box {
		height: 60vh;
		max-height: 60vh;
	}

	/* 自定义导航栏内容 start */
	.custom-nav {
		height: 100%;

		&__back {
			margin: auto 30rpx;
			margin-right: 10rpx;
			flex-basis: 5%;
			width: 100rpx;
			position: absolute;
		}
	}


	.left-width {
		flex-basis: 28%;
	}

	/* 自定义导航栏内容 end */
	.tn-classify {

		/* 搜索栏 start */
		&__search {
			&--wrap {}

			&__box {
				flex: 1;
				text-align: center;
				padding: 20rpx 30rpx;
				margin: 0 30rpx;
				border-radius: 60rpx;
				font-size: 30rpx;
			}

			&__icon {
				padding-right: 10rpx;
			}

			&__text {
				padding-right: 10rpx;
			}
		}

		/* 搜索栏 end */

		/* 分类列表和内容 strat */
		&__container {}

		&__left-box {}

		&__right-box {
			background-color: #FFFFFF;
		}

		/* 分类列表和内容 end */

		/* 侧边导航 start */
		&__tabbar {
			&__item {
				height: 110rpx;

				&:first-child {
					border-top-right-radius: 0rpx;
				}

				&:last-child {
					border-bottom-right-radius: 0rpx;
				}

				&--active {
					background-color: #FFFFFF;
					position: relative;
					// font-weight: bold;
					color: #3668FC;

					&::before {
						content: '';
						position: absolute;
						width: 12rpx;
						height: 40rpx;
						top: 50%;
						left: 0;
						background-color: #3668FC;
						border-radius: 12rpx;
						transform: translateY(-50%) translateX(-50%);
					}

					&--prev {
						border-bottom-right-radius: 26rpx;
					}

					&--next {
						border-top-right-radius: 26rpx;
					}
				}
			}
		}

		/* 侧边导航 end */

		/* 分类内容 start */
		&__content {
			margin: 18rpx;

			/* 推荐商品 start */
			&__recomm {
				margin-bottom: 40rpx;

				&__swiper {}
			}

			/* 推荐商品 end */

			/* 子栏目 start */
			&__sub-classify {
				margin-bottom: 20rpx;
				padding-bottom: 40rpx;

				&--title {
					font-weight: bold;
					margin-bottom: 18rpx;
				}

				&__content {

					&__item {
						width: 50%;
					}

					&__image {
						background-color: rgba(188, 188, 188, 0.1);
						border-radius: 10rpx;
						margin: 10rpx 10rpx 0 10rpx;
						margin-left: 0;
						width: 100%;
						height: 340rpx;
						overflow: hidden;
						border: 1rpx solid rgba(0, 0, 0, 0.02);

						image {
							width: 100%;
							height: 340rpx;
						}
					}

					&__title {
						margin-right: 10rpx;
					}
				}
			}

			/* 子栏目 end */
		}

		/* 分类内容 end */
	}
</style>